<template lang="pug">
.handdraw-pc(v-show="isShow")
  Menu

  MenuContents

  Loading(v-if='getLoadImage && isShowLoading', @closeLoading='closeLoading')

  Effect(v-if="isShowEffect", :effect="isShowEffect")

  //- audio(:src='getMusic', preload, loop, ref='ovvAudio')

  .handdraw-audio.boxsi.hand(v-if="getMusic", @click="toggleMusic")
    .music-audio(:class="[isMute ? 'on' : '']")
      p.omit.tac {{getMusicName}}

  //- .start-pic.pos-a(v-if="getStartPic && isShowPic", @click="hideStartPic(true)")
  //-   .img-box
  //-     img(:src="getStartPic", alt="")

  HanddrawView

  HandOption

  CityIcon

  HanddrawInfo(@playmusic="toggleMusic" :open="isMute")

  IframeMap
</template>

<script>

import handdrawMixins from '@/mixins/handdraw'

export default {
  mixins: [handdrawMixins],
  data() {
    return {
    }
  },
}
</script>

<style lang="stylus" scoped>
@keyframes musicAnimation
  0%
    transform rotate(0)
  100%
    transform rotate(360deg)

.handdraw-pc
  width 100%
  height 100%
  position relative
  .handdraw-audio
    position fixed
    bottom 15px
    right 20px
    z-index 101
    border-radius 20px 20px 5px 5px
    padding 4px
    width 40px
    height 66px
    background-color #fff
    .music-audio
      position relative
      width 100%
      &:before
        content ''
        position absolute
        background url(/static/images/handdraw/global.png) no-repeat
        background-position -50.5px -0.5px
        width 32px
        height 32px
        background-size: 200px
      &:after
        content ''
        position absolute
        background-position -125.5px -75.5px
        background-size 200px
        width 11px
        height 11px
        top 9.5px
        left 50%
        transform translateX(-50%)
        border-radius 50%
        background-color #ee7702
      &.on
        &:before
          animation musicAnimation 20s linear 0s infinite normal
        &:after
          background url(/static/images/handdraw/global.png) no-repeat
          width 13px
          height 13px
          border-radius 0
          background-size 240px
          background-position -150.6px -90.6px
      p
        padding-top 40px
</style>
